<template>
  <div class="kanban-menu">
    <a-row class="menu-hd">
      <a-col :span="12"><span class="title">看板</span></a-col>
      <a-col :span="12" class="icon-right">
        <a-tooltip placement="right">
          <template #title>添加看板</template>
          <PlusOutlined @click="addKanban()" />
        </a-tooltip>
      </a-col>
    </a-row>

    <div class="search-box">
      <a-input-search placeholder="搜索" />
    </div>
    <div class="menu-box">
      <a-menu
        mode="inline"
        :openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        @openChange="onOpenChange"
        @click="menuClick"
      >
        <a-menu-item v-for="item in list" :key="item._id">
          <span class="text"><ApartmentOutlined />{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
  import { FolderOpenOutlined, ApartmentOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { useStore } from 'vuex';
  import { useRouter, useRoute } from 'vue-router';

  export default defineComponent({
    components: {
      FolderOpenOutlined,
      ApartmentOutlined,
      PlusOutlined,
    },
    props: {
      list: {
        type: Array,
      },

      selectedKanban: {
        type: Object,
        default: null,
      },
    },
    setup(props) {
      const store = useStore();
      const router = useRouter();

      const state = reactive({
        rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
        openKeys: ['sub1'],
        selectedKeys: props.selectedKanban ? [props.selectedKanban._id] : [],
      });

      const onOpenChange = (openKeys: string[]) => {
        const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
        if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
          state.openKeys = openKeys;
        } else {
          state.openKeys = latestOpenKey ? [latestOpenKey] : [];
        }
      };

      const menuClick = (item) => {
        let find = props.list.find((o) => o._id === item.key);
        if (find) {
          router.push('/dashboard/' + find._id);
        }
      };

      watch(
        () => props.selectedKanban,
        (v) => {
          state.selectedKeys = v ? [v._id] : [];
        }
      );

      return {
        ...toRefs(state),
        onOpenChange,
        addKanban: () => store.commit('common/setParams', { addKanbanVisible: true }),
        menuClick,
      };
    },
  });
</script>
<style lang="scss">
  .kanban-menu {
    height: 100%;
    .menu-hd {
      padding: 15px 10px 0;
      .icon-right {
        text-align: right;
      }
      .title {
        font-size: 14px;
      }
    }
    .search-box {
      padding: 15px 10px;
    }

    .menu-box {
      height: calc(100% - 100px);
      overflow: auto;

      .text {
        font-size: 12px;
        .anticon {
          font-size: 12px;
          margin-right: 5px;
          color: $text-color-secondary;
        }
      }
      .ant-menu-item-selected {
        .text .anticon {
          color: $color;
        }
      }
    }
  }
</style>
